<template>
    <div :style="styleColor">
        <div id="mapContainerTD" style="width:100%;height:100%;"></div>
    </div>
   
</template>
<script>

import { customsCoordinates } from '@/utils/customsCoordinates.js'
import { reqFindCustoms, reqFindCustomsCode } from '@/api/home/index.js'
// import L from "leaflet";

export default {
    props: {    //仿照超链，props项保留
        value: Object,
        ispreview: Boolean
    },
    data() {
        return {
          
             mapTD: null,
            overView: undefined,
            marker: undefined,
           
            options: {},
            customList:[]
        }
    },
    computed: {
    
        transStyle() {
            // console.log('??????????????????', this.objToOne(this.options))
            return this.objToOne(this.options);
        },
        styleColor() {
            return {
                position: this.ispreview ? "absolute" : "static",
               
                width: this.transStyle.width + "px",
                height: this.transStyle.height + "px",
                left: this.transStyle.left + "px",
                top: this.transStyle.top + "px",
                // right: this.transStyle.right + "px"
               
            }
        }
    },
    watch:{
        customList:{
            deep:true,
            handler(val){
                if(val.length==0||!val) {
                    this.initMap(customsCoordinates)
                }else {

                    this.initMap(val)
                }
            }
        }
    },
    mounted() {
        this.options = this.value
    //         this.initMap()
    //    this.$nextTick(()=>{
           
    //    })

    },
    created(){
        this.getList()
    },
    methods:{
        async getList() {
            const res = await reqFindCustoms()
            // console.log(res);
            this.customList = res.data
        },
        initMap(customList){
              var T = window.T;
            this.mapTD = null
             var lay;
            //    var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" +
            //     "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
            //     "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=58880376190271079773165912f7caa2";

                 var imageURL = "http://10.99.103.138:81/img_c/wmts?" +
                "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" +
                "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}";
            //创建自定义图层对象
            lay = new T.TileLayer(imageURL, {minZoom: 1, maxZoom: 17});
            var config = {layers: [lay]};
            //初始化地图对象
           
            // 创建地图实例
            let mapTD = new T.Map("mapContainerTD",config);
            // mapTD.setStyle('indigo')
            // 创建点坐标
            let point = new T.LngLat(121.487899486, 31.24916171);
            //创建标注
            // this.marker = new T.Marker(point);
            //缩略地图控件。
            // this.overView = new T.OverviewMapControl({ isOpen: true });
            //添加控件
            // this.map.addControl(this.overView);
            //添加一个标注
            // this.map.addOverLay(this.marker);
            // 初始化地图，设置中心点坐标和地图级别
            mapTD.centerAndZoom(point, 12);
            // mapTD.setStyle('indigo')
            // mapTD.setMinZoom(10)
            // mapTD.setMaxZoom(13)
            //开启鼠标滚轮缩放
            mapTD.enableScrollWheelZoom();
            mapTD.disableDoubleClickZoom()
            
            // let sicon = new T.Icon(require("@/assets/images/bigViewIMG/red.png"), new T.Point(20, 28))
            let sicon = new T.Icon({
                iconUrl:require("@/assets/images/bigViewIMG/red.png"),
                iconSize:new T.Point(20, 28)
            })
            // let bicon = new T.Icon(require("@/assets/images/bigViewIMG/blue1.png"), new T.Point(16, 20))
           let bicon= new T.Icon({
                iconUrl:require("@/assets/images/bigViewIMG/blue1.png"),
                iconSize:new T.Point(16, 20)
            })

            //限制地图范围的部分
            // var strictBounds = new T.Bounds(new T.Point(119.72355,30.26408), new T.Point(123.20063,32.36467)); //左下右上
         
            // var strictBounds =this.map.getBounds();

            // this.map.addEventListener("dragend", function () {
            //     if (strictBounds.containsPoint(this.getCenter())) return;
            //     var c = this.getCenter(),
            //     x = c.lng, y = c.lat,
            //         maxX = strictBounds.getNorthEast().lng,
            //         maxY = strictBounds.getNorthEast().lat,
            //         minX = strictBounds.getSouthWest().lng,
            //         minY = strictBounds.getSouthWest().lat;
            //     if (x < minX) x = minX;
            //     if (x > maxX) x = maxX;
            //     if (y < minY) y = minY;
            //     if (y > maxY) y = maxY;
            //     this.centerAndZoom(new T.Point(x, y), this.getZoom());
            // })



          
            // console.log(customList);
            for (var i = 0; i < customList.length; i++) {
              
                if (customList[i].customsLs !== '上海海关') {
                    var point1 = new T.LngLat(customList[i].longitudeLatitude.split(',')[0], customList[i].longitudeLatitude.split(',')[1]);
                    // let label = new T.Label(`<div>` + customList[i].customsLs + `</div>`,{
                    //     position: new T.LngLat(customList[i].longitudeLatitude.split(',')[0], customList[i].longitudeLatitude.split(',')[1]),
                        
                    //     offset: new T.Point(10, -20),

                    // });
                     let label = new T.Label({
                        text: `<div style="color:#fff">` + customList[i].customsLs + `</div>`,
                        position: new T.LngLat(customList[i].longitudeLatitude.split(',')[0], customList[i].longitudeLatitude.split(',')[1]),
                        offset: new T.Point(-10,-10),
                    });
                    // label.setStyle({
                    //     backgroundColor: "none",
                    //     border: 'none',
                    //     fontSize: '12px',
                    //     fontWeight:'800',
                    //     color:'#04378F'
                    // })
                    var marker = new T.Marker(point1, { icon: bicon });// 创建标注
                    mapTD.addOverLay(marker);
                    mapTD.addOverLay(label);
                    addMarker(customList[i].customsLs, marker, this, customList[i].longitudeLatitude);
                }else {
                    var point2 = new T.LngLat(customList[i].longitudeLatitude.split(',')[0], customList[i].longitudeLatitude.split(',')[1]);
                    // let label = new T.Label(`<div>` + customList[i].customsLs + `</div>`,{
                    //     position: new T.LngLat(customList[i].longitudeLatitude.split(',')[0], customList[i].longitudeLatitude.split(',')[1]),
                    //     offset: new T.Point(10, -20),

                    // });
                     let label = new T.Label({
                        text: `<div style="color:#fff">` + customList[i].customsLs + `</div>`,
                        position: new T.LngLat(customList[i].longitudeLatitude.split(',')[0], customList[i].longitudeLatitude.split(',')[1]),
                        offset: new T.Point(-10,-10),
                    });
                    // label.setStyle({
                    //     backgroundColor: "none",
                    //     border:'none',
                    //     fontSize:'14px',
                    //     fontWeight: '800',
                    //     color: 'red'
                    // })
                    var marker = new T.Marker(point2, { icon: sicon });// 创建标注
                    mapTD.addOverLay(marker);
                    mapTD.addOverLay(label);
                    addMarker(customList[i].customsLs, marker, this, customList[i].longitudeLatitude);
                }


              
               
            }
            let preMarker;
            // let myIcon2 = new T.Icon(require("@/assets/images/bigViewIMG/red.png"), new T.Point(20, 28))
            // let myIcon = new T.Icon(require("@/assets/images/bigViewIMG/red1.png"), new T.Point(30, 38))
            let myIcon=new T.Icon({
                iconUrl:require("@/assets/images/bigViewIMG/red1.png"),
                iconSize:new T.Point(30, 38)
            })
            // let bicon2 = new T.Icon(require("@/assets/images/bigViewIMG/blue2.png"), new T.Point(26, 30))
            let bicon2=new T.Icon({
                iconUrl:require("@/assets/images/bigViewIMG/blue2.png"),
                iconSize:new T.Point(26, 30)
            })
            function addMarker(name, marker, that,jw) {
               
                // let newMyIcon = new T.Icon(require("@/assets/images/bigViewIMG/red1.png"), new T.Size(30, 38))
                marker.addEventListener("click", async (e)=> {
                //    console.log(marker);
                    





                    if (typeof (preMarker) != 'undefined') {
                        // console.log(preMarker);
                        preMarker.setIcon(bicon);  
                    }



                    if (jw =='121.49,31.24') {
                        marker.setIcon(myIcon);
                    }else {
                        marker.setIcon(bicon2);
                    }
                    
                    preMarker = marker;
                    // console.log(preMarker);


                        









                    const res = await reqFindCustomsCode(name)
                    // console.log(res.data);
                    that.$store.commit('homeStatus/changeCustomsArea', true)
                    if (res.data.length == 1) {
                        if (res.data[0] == 2200) {
                            that.$store.commit('homeStatus/changeCustomCode', '22')
                        } else {
                            that.$store.commit('homeStatus/changeCustomCode', res.data[0])
                        }

                    } else if (res.data.length > 1) {
                        that.$store.commit('homeStatus/changeCustomCode', res.data.join('|'))
                    } else {
                        that.$store.commit('homeStatus/changeCustomCode', '22')
                    }
                    
                    // 判断data里面的数据是不是只有一项，
                    // 有一项就直接传
                    // 有多项就拼接 |
                    // console.log(that.$store.state.homeStatus.customCode);

                    // console.log( name,marker);
                    // 点击点位，重新掉接口
                });
            }
            this.mapTD=mapTD
           
        }

       
    }
}
</script>

<style>
.anchorBL {
    display: none;
}
</style>
<style scoped lang="scss">
//隐藏天地图底部logo
::v-deep .tdt-control-container {
    display: none !important;
}
::v-deep .tdt-label {
    background: none;
    color: #000;
    font-size: 14px;
    border: none;
    font-weight: bold;
    -webkit-box-shadow: none;
    box-shadow: none;
}
</style>